<!-- 页面 -->
<template>
	<s-layout navbar="none" class="p-3">
		<s-empty v-if="state.list.length === 0" icon="/static/order-empty.png" text="快去学习吧"></s-empty>
		<view v-if="state.list.length > 0">
			<view class="bg-white order-list-card-box ss-r-10 ss-m-t-14 ss-m-20" v-for="item in state.list"
				:key="item.id">
				<view class="ss-top">{{item.category_name}}</view>
				<view class="ss-order-card-warp bg-white">
					<view class="title-text ss-line-2">{{ item.goods_name }}</view>
					
					<view class="progress-text">已观看<span class="s-num">{{item.complete_count}}</span>节/已更新<span
							class="s-num">{{item.lesson_num}}</span>节</view>
				</view>
				<view class="study-report-process">
					<view class="coursebottom">
						
						<view class="progress-box">
							<progress :percent="Number(item.percent)" activeColor="#10AEFF" show-info stroke-width="5" :font-size="12"/>
						</view>
					</view>
					<view class="study-btn">
						<view class="xxsj" @tap="showstudyreport(item.goods_id)">学习数据</view>
						<!--sheep.$router.go('/pages/user/course/studyreportdetail', { id: item.goods_id })-->
						<view class="jxxx" @tap="goDetailPage(item)">继续学习</view>
					</view>
				</view>
			</view>
		</view>
	</s-layout>
	<studtreportdetail type="center" v-model="state.couponInfo" :id="state.id" :show="state.showDetail"
		@close="state.showDetail = false"></studtreportdetail>
</template>

<script setup>
	import {
		computed,
		reactive
	} from 'vue';
	import {
		onLoad,
		onReachBottom,
		onPullDownRefresh

	} from '@dcloudio/uni-app';
	import {
		formatOrderColor
	} from '@/sheep/hooks/useGoods';
	import sheep from '@/sheep';
	import _ from 'lodash';
	import {
		isEmpty
	} from 'lodash';
	import studtreportdetail from '@/pages/user/course/studyreportdetail.vue'
	const tradeManaged = computed(() => sheep.$store('app').has_wechat_trade_managed);


	// 数据
	const state = reactive({
		currentTab: 0,
		list: [],
		loadStatus: '',
		pgList: 20,
		showDetail: false,
		id: 0,
	});

	// 获取订单列表
	async function getUserReport() {
		state.loadStatus = 'loading';
		let res = await sheep.$api.course.getStudyReport();
		state.error = res.error;
		if (res.code === 1) {
			console.log(res)
			state.list = res.data;
		}
	}
	onLoad(async (options) => {
		getUserReport();
	});

	function showstudyreport(id) {
		//console.log(id);
		state.showDetail = true;
		state.id = id;
		//getUserReport(id)
	}

	function goDetailPage(item) {
		console.log(item);
		if (item.content_type == 'lubo' || item.content_type == 'zhibo') {
			var course = {
				content_type: item.content_type,
				goods_id: item.goods_id
			};
			sheep.$router.navigatorToCourse(course);
		}
	}
</script>

<style lang="scss" scoped>
	.progress-text {
		line-height: 50px;
		font-size: 14px;
		color: #333333;

		span {
			font-size: 14px;
			display: inline;
		}
	}
	.coursebottom {
		text-align: center;
		font-size: 16px;
		
		.progress-box {
			margin: 20px 0;
			width: 100%;
		}

		.progress {
			width: 100%;
		}


		.progress-text {
			text-align: left;
			color: #888888;
		}

		.s-num {
			color: var(--ui-BG-Main);
			padding: 0px 5px;
		}
	}

	.order-list-card-box {
		padding: 30rpx;

		.ss-top {
			font-size: 14px;
			color: #9fa3a2;
			height: 32px;
			line-height: 25px;
			border-bottom: 1px solid #e1e1e1;
		}

		.title-text {
			margin-top: 10px;
			font-size: 16px;
			line-height: 40rpx;
		}
	}
	
	.study-report-process{
		display:flex;
		justify-content: space-between; /* 水平居中 */
		align-items: center;     /* 垂直居中 */
		
	}
	.study-report-process .coursebottom{width: 60%;}
	.study-btn {
		display: flex;
		justify-content: flex-end;
		margin-right: 5px;
	}

	.study-btn .xxsj {
		width: 110px;
		height: 40px;
		line-height: 40px;
		text-align: center;
		cursor: pointer;
		border: 1px solid #f09964;
		padding: 2px 6px;
		font-size: 12px;
		/* background-color: rgba(255, 96, 0, 0.1); */
		color: #ff6000;
		/* border: none; */
		margin-right: 10px;
	}

	.study-btn .jxxx {
		border-radius: 3px;
		font-size: 14px;
		width: 110px;
		height: 40px;
		line-height: 40px;
		text-align: center;
		cursor: pointer;
		background-color: #ff6000;
		color: #FFF;
		border: none;
		border: 1px solid #f0bb9b;
	}
</style>